<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" http-equiv="content-type" content="text/html"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>全屏搜索栏</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="./index.css">
    
    </head>
    <body>
       <input type="checkbox" name="" id="search_btn"  hidden>
       <label for="search_btn" class="search_btn">
           <i class="fa fa-search" aria-hidden="true"></i>
        </label>
        <label for="search_btn" class="close_btn">
           <i class="fa fa-close" aria-hidden="true"></i>
       </label>
       <div class="container">
           <div class="search_box">
               <input type="text" placeholder="请输入。。。" name="" id="">
               <i class="fa fa-search" aria-hidden="true"></i>
           </div>
       </div>

      
    

    </body>
</html>